<template>
	<view class="content">
		<!-- 搜索 -->
		<search></search>
		<!-- 轮播 -->
		<view class="banner">
			<swiper 
			:indicator-dots="true" 
			indicator-color="#e6e6e6" 
			indicator-active-color="#dc2c1f"
			circular 
			:autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in banners" :key="item.bannerId">
					<image :src="item.pic" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 推荐 -->
		<icon-recommend />
		<!-- 推荐歌曲 -->
		<recommend :recommmendLs="recommmendLs" :topList="allTopListData"></recommend>
		<!-- 底部播放控制台 -->
		<BottomBar ref="btmBarRef"/>
	</view>
</template>

<script>
	// import { mapState } from "vuex"
	// 导入接口
	import { getBanner, getPersonalize, getToplist, getMusicDetail } from '../../api/index.js'
	// 搜索组件
	import Search from "../../components/Search.vue"
	// 推荐导航组件
	import IconRecommend from "./childComps/IconRecommend.vue"
	// 推荐歌曲组件
	import Recommend from "./childComps/Recommend.vue"
	// 底部播放控制台
	import BottomBar from "./childComps/BottomBar.vue"
	export default {
		components: {Search, IconRecommend, Recommend, BottomBar},
		data() {
			return {
				banners: [],
				recommmendLs: [],
				topList: [],
				topListData: [],
				allTopListData: [],
				allTracks: [],
				musicPlaylist: [],
				// isBoBar: true
			}
		},
		onLoad() {
			this.getBannerFun()
			this.getPersonalizeFun()
			this.getToplistFun()
		},
		// computed: {
		// 	...mapState(['musicPlaylist'])
		// },
		methods: {
			// 轮播图方法
			async getBannerFun() {
				// 1: 代表安卓
				const {data: {banners: res}} = await getBanner(1)
				// 存储轮播数据数据
				this.banners = res
			},
			// 推荐歌曲方法
			async getPersonalizeFun() {
				const {data: {result: res}} = await getPersonalize()
				this.recommmendLs = [...res]
			},
			// 获取所有榜单的方法
			async getToplistFun() {
				const {data: {list: res}} = await getToplist()
				this.topList = [...res]
				let index = 0
				while(index < 5) {
					const {data: {playlist: item}} = await getMusicDetail(this.topList[index].id)
					this.topListData.push(item)
					// 存放所有的排行榜数据
					this.allTracks.push(item.tracks)
					const itemList = {
						name: item.name,
						id: item.id,
						tracks: item.tracks.slice(0, 3)
					}
					this.allTopListData.push(itemList);
					index++
				}
			}
		},
		onShow() {
			// 等待DOM加载完毕后在执行，子组件 BottomBar的初始化数据函数
			this.$nextTick(function(){
				this.$refs.btmBarRef.initData()
			})
		}
	}
</script>

<style lang="scss">
	.banner {
		padding: 0 30rpx;
		swiper {
			height: 300rpx;
			border-radius: 20rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				// border-radius: 20rpx;
			}
		}
	}
</style>
